<template>
  <div id="FriendChat">
    <div class="sidebar">
      <card></card>
      <list></list>
    </div>
    <div class="main">
      <message></message>
      <usertext></usertext>
    </div>
  </div>
</template>

<script>
import card from "../../components/chat/card.vue";
import list from "../../components/chat/list.vue";
import message from "../../components/chat/message.vue";
import usertext from "../../components/chat/usertext.vue";
export default {
  name: "FriendChat",
  //import引入的组件需要注入到对象中才能使用",
  components: { card, list, message, usertext },
  data() {
    //这里存放数据",
    return {};
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {},
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {},
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {},
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.$store.dispatch("initData");
  },
  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {},
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {},
  //生命周期 - 销毁之前",
  beforeDestroy() {},
  destroyed() {},
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {}
};
</script>

<style lang="scss" scoped>
#FriendChat {
  margin: 20px auto;
  width: 1200px;
  height: 800px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(95, 158, 160, 0.5);
  .sidebar,
  .main {
    height: 100%;
  }
  .sidebar {
    float: left;
    color: #f4f4f4;
    background-color: #2e3238;
    width: 200px;
  }
  .main {
    position: relative;
    overflow: hidden;
    background-color: #eee;
  }
}
</style>
